<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>layout 管理界面大布局示例 - Layui</title>
  <base href="http://localhost:8080/bookstore/">
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="static/style/style.css">
</head>
<body>
<div class="layui-layout layui-layout-admin" id="app1">
  <div class="layui-header">
    <div class="layui-logo layui-hide-xs layui-bg-black">书城首页</div>
    <ul class="layui-nav layui-layout-right">
       <li class="layui-nav-item layui-hide layui-show-sm-inline-block">
           <a href="pages/user/login.html">登录</a>

       </li>
        <li class="layui-nav-item layui-hide layui-show-sm-inline-block">
            <a href="pages/user/register.html">注册</a>
        </li>
      <li class="layui-nav-item layui-hide layui-show-sm-inline-block">
        <h1 v-if="isShowElement==false">
          <a href="javascript:;">
<!--            <img src="https://unpkg.com/outeres@0.0.10/img/layui/icon-v2.png" class="layui-nav-img">-->
            {{user.username}}
          </a>
          <dl class="layui-nav-child">
            <dd><a href="javascript:;">个人信息</a></dd>
            <dd><a href="javascript:;">设置</a></dd>
            <dd @click="logout"><a href="javascript:;"><a href="#">退出登录</a></a></dd>
          </dl>
        </h1>
      </li>
    </ul>
  </div>
  <div class="layui-side layui-bg-black">
    <div class="layui-side-scroll">
      <!-- 左侧导航区域（可配合layui已有的垂直导航） -->
      <ul class="layui-nav layui-nav-tree" lay-filter="test">
        <li v-for="(item,index) in nav_left" style="margin-top: 50px;width: 200px;height: 50px"
            @click="html_change(item)"
        >{{index}}:::{{item}}</li>
      </ul>
    </div>
  </div>
  <div class="layui-body body-host" style="width: 1600px;heigth:800px;position: absolute">
    <!-- 内容主体区域 -->
    <div style="padding: 15px;">
      <blockquote class="layui-elem-quote layui-text">
            目前还有几件未发货，已发货几件
      </blockquote>
      <div class="border-iframe">
<!--          -->
          <iframe class="iframe_size" :src="html_url" frameborder="0"></iframe>
      </div>
    </div>
  </div>
</div>

<link href="https:/cdn.staticfile.org/layui/2.8.0/css/layui.css" rel="stylesheet">
<script src="static/script/layui.js"></script>
<link rel="stylesheet" href="static/style/layui.css">
<script src="static/script/vue.js"></script>
<script src="static/script/axios-0.18.0.js"></script>
<link rel="stylesheet" href="static/style/bootstrap.min.css">
<link rel="stylesheet" href="static/style/purecss.css">
<link rel="stylesheet" href="static/style/prism.css">
<link rel="stylesheet" href="static/style/bulma.css">
<link rel="stylesheet" href="https://rsms.me/inter/inter.css">
<link rel="stylesheet" href="element-ui-2.13.0/lib/theme-chalk/index.css">
<script src="element-ui-2.13.0/lib/index.js"></script>
<script>
    new Vue({
        el:"#app1",
        data(){
        return{
            message:{},
            total:100,
            currentPage:1,
            pageSize:10,
            user:[],
            gridData: [],
            form:{},
            nav_left:["首页","后台管理","购物车","订单管理"],
            html_url:"pages/client/home.html",
            isShowElement:true
          }
        },
        methods:{
            show(){
                    var that = this;
                    axios({
                        url:"BookServlet?action=queryAll&pageNo="+that.currentPage+"&size="+that.pageSize,
                        type:"post",
                        dataType:"json",
                    }).then(function (response) {
                          if(response.status===200){
                            console.log(response.data.list)
                            that.message=response.data;
                            that.total=response.data.total;
                          }else{
                            alert("数据获取失败！！")
                          }
                    },function (error) {
                        console.log(error)
                    })
                  },
            getUser(){
                  axios.post("UserServlet?action=getUser").then(response=>{
                      console.log("11111111111111111111111111111111111111111111111")
                      console.log(response)
                      console.log(response.data)
                      this.user=response.data;
                      this.isShowElement=false;
                  })
              },
            logout(){
                  console.log("注销")
                  axios.post("UserServlet?action=logout").then(response=>{
                    console.log(2131);
                      console.log(response)
                  })
              },
            //当前页面的最大数据量
            handleSizeChange(val) {
                // console.log(val);
                this.pageSize=val;
              },
            //分页函数
            // val参数获取当前点击的页数
            handleCurrentChange(val) {
                                    let _this=this;
                                    _this.currentPage=val;
                                    this.show();
                                  },
            html_change(value){
                //["首页","后台管理","购物车"]
                if(value=="首页"){
                    this.html_url="pages/client/home.html";
                }
                if(value=="后台管理"){
                    this.html_url="pages/manager/manager.html";
                }
                if(value=="购物车"){
                    this.html_url="pages/cart/cart.html";
                }if(value=="订单管理"){
                    this.html_url="pages/order/order.html"
                }
            }
        },created:function () {
                this.show();
                this.getUser();
      }
})
</script>

</body>
</html>